<template>
  <div class="box">
    <div>
      <h3>使用说明：</h3>
      <p>本组件对echarts官方组件进行二次封装，想要对应的显示内容需要引入官方插件</p>
      <p
        >使用方法只需要传入对应的options参数即可。例：
        {{ '< VChart : option = " lineOption" : style = "newHeight()" autoresize /> ' }}
      </p>
      <p>其中options对应这我们想要显示的内容，图形以及各项参数等....</p>
    </div>
    <a-row class="top" :gutter="[12, 12]">
      <!-- <a-col :span="14">
        <div class="topBox">
          <div class="titleBox">
            <div class="title">待办事项</div>
            <div class="text">单位:个</div>
          </div>
          <a-row :gutter="[0, 12]">
            <a-col :span="8" v-for="item in dataSource" :key="item.key" @click="handleToUrl(item)">
              <div class="mainBox">
                <img :src="item.img" width="48" />
                <div class="mainText">
                  <div class="num" :style="{ color: item.color }">{{ item.num }}</div>
                  <div class="smallText">{{ item.title }}</div>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-col> -->
      <!-- <a-col :span="10">
        <div class="topBox topRightBox">
          <div class="titleBox">
            <div class="title">各单位罚款金额统计表</div>
          </div>
          <DynamicTable size="small" :bordered="false" :data-request="loadData" :columns="columns" row-key="id"
            :search="false" :pagination="false" :showToolBar="false" :scroll="{ y: 151 }" :showIndex="true">
          </DynamicTable>
        </div>
      </a-col> -->
      <a-col :span="12">
        <div class="topBox">
          <div class="titleBox">
            <div class="title">折线图</div>

            <div class="text">
              <img src="@/assets/images/bluespot.png" width="8" />
              案件数量
            </div>
          </div>
          <VChart :option="spaceChartOption" :style="newHeight()" autoresize />
        </div>
      </a-col>
      <a-col :span="12">
        <div class="topBox">
          <div class="titleBox">
            <div class="title">饼图</div>
          </div>
          <VChart :option="caseChartOption" :style="newHeight()" autoresize />
        </div>
      </a-col>
      <a-col :span="12">
        <div class="topBox">
          <div class="titleBox">
            <div class="title">柱状图</div>
          </div>
          <VChart :option="barChartOption" :style="newHeight()" autoresize />
        </div>
      </a-col>
      <a-col :span="12">
        <div class="topBox">
          <div class="titleBox">
            <div class="title">曲线图</div>
          </div>
          <VChart :option="smoothLineChartOption" :style="newHeight()" autoresize />
        </div>
      </a-col>
      <a-col :span="24">
        <div class="topBox">
          <div class="titleBox">
            <div class="title">多条折线图</div>
          </div>
          <VChart :option="allLineChartOption" :style="newHeight()" autoresize />
        </div>
      </a-col>
      <a-col :span="24">
        <div class="topBox">
          <div class="titleBox">
            <div class="title">多条折线图</div>
          </div>
          <VChart :option="mixOption" :style="newHeight()" autoresize />
        </div>
      </a-col>
      <a-col :span="24">
        <div class="topBox">
          <div class="titleBox">
            <div class="title">雷达图</div>
          </div>
          <VChart :option="radarChartOption" :style="newHeight()" autoresize />
        </div>
      </a-col>
      <a-col :span="24">
        <div class="topBox">
          <div class="titleBox">
            <div class="title">散点图</div>
          </div>
          <VChart :option="scatterChartOption" :style="newHeight()" autoresize />
        </div>
      </a-col>
      <a-col :span="24">
        <div class="topBox">
          <div class="titleBox">
            <div class="title">横分组条形图</div>
          </div>
          <VChart :option="categoryChartOption" :style="newHeight()" autoresize />
        </div>
      </a-col>
      <a-col :span="24">
        <div class="topBox">
          <div class="titleBox">
            <div class="title">竖分组条形图</div>
          </div>
          <VChart :option="categoryChartOption2" :style="newHeight()" autoresize />
        </div>
      </a-col>
      <a-col :span="24">
        <div class="topBox">
          <div class="titleBox">
            <div class="title">堆叠条形图</div>
          </div>
          <VChart :option="shadowChartOption" :style="newHeight()" autoresize />
        </div>
      </a-col>
      <a-col :span="24">
        <div class="topBox">
          <div class="titleBox">
            <div class="title">百分比堆叠柱状图</div>
          </div>
          <VChart :option="percentageChartOption" :style="newHeight()" autoresize />
        </div>
      </a-col>
      <a-col :span="24">
        <div class="topBox">
          <div class="titleBox">
            <div class="title">正负值柱状图</div>
          </div>
          <VChart :option="panVChartOption" :style="newHeight()" autoresize />
        </div>
      </a-col>
      <a-col :span="24">
        <div class="topBox">
          <div class="titleBox">
            <div class="title">堆叠柱状图</div>
          </div>
          <VChart :option="stackedChartOption" :style="newHeight()" autoresize />
        </div>
      </a-col>
      <a-col :span="24">
        <div class="topBox">
          <div class="titleBox">
            <div class="title">横两端条形图</div>
          </div>
          <VChart :option="transverseChartOption" :style="newHeight()" autoresize />
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';

  import img1 from '@/assets/images/main1.png';
  import img2 from '@/assets/images/main2.png';
  import img3 from '@/assets/images/main3.png';
  import img4 from '@/assets/images/main4.png';
  import img5 from '@/assets/images/main5.png';
  import img6 from '@/assets/images/main6.png';

  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
  import VChart from 'vue-echarts';
  import { LineChart, PieChart, BarChart, RadarChart, ScatterChart } from 'echarts/charts';
  import type {
    LineSeriesOption,
    ComposeOption,
    XAXisOption,
    YAXisOption,
    PieSeriesOption,
  } from 'echarts/types/dist/shared';

  import {
    useTable,
    type OnChangeCallbackParams,
    type TableColumn,
  } from '@/components/core/dynamic-table';
  import {
    getTableListApi,
    getDeptMoney,
    getCaseType,
    getMissionNum,
  } from '@/api/dashboard/welcome';
  import router from '@/router';
  import type echarts from 'echarts';

  type ECOption = ComposeOption<LineSeriesOption | XAXisOption | YAXisOption | PieSeriesOption>;

  use([
    CanvasRenderer,
    TooltipComponent,
    GridComponent,
    LineChart,
    PieChart,
    BarChart,
    RadarChart,
    ScatterChart,
    LegendComponent,
  ]);

  const newHeight = () => {
    return `height: calc(100vh - 494px);min-height: 250px;width: 100%`;
  };
  const [DynamicTable, dynamicTableInstance] = useTable();

  // line
  const spaceChartOption = ref({
    color: ['#1677FFFF'],
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: [],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [],
        type: 'line',
      },
    ],
  });
  // pie
  const caseChartOption = ref({
    color: [
      '#FF4D4FFF',
      '#756CEFFF',
      '#0052D9FF',
      '#1677FFFF',
      '#00D5E0FF',
      '#32BE78FF',
      '#FBD34FFF',
      '#F8AC30FF',
    ],
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      top: 'bottom',
      left: 'right',
      icon: 'circle',
      align: 'left',
    },
    series: [
      {
        name: '案件类型',
        type: 'pie',
        radius: ['40%', '60%'],
        data: [
          { value: 20, name: '测试001' },
          { value: 20, name: '测试002' },
          { value: 20, name: '测试003' },
          { value: 20, name: '测试004' },
          { value: 20, name: '测试005' },
          { value: 20, name: '测试006' },
          { value: 20, name: '测试007' },
          { value: 20, name: '测试008' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  });
  //bar
  const barChartOption = {
    color: ['#1677FFFF'],
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
      },
    ],
  };
  //smoothLine
  const smoothLineChartOption = {
    color: ['#1677FFFF'],
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
      },
    ],
  };
  const allLineChartOption = {
    title: {
      text: 'Stacked Line',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['类型一', '类型二', '类型三'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '类型一',
        color: '#1677FFFF',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: '类型二',
        color: '#32BE78FF',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: '类型三',
        color: '#F8AC30FF',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410],
      },
    ],
  };

  //shadowChartOption
  const shadowChartOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
      },
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'value',
    },
    yAxis: {
      type: 'category',
      data: ['2021', '2022', '2023', '2024'],
    },
    series: [
      {
        name: '类型一',
        type: 'bar',
        stack: 'total',
        color: '#1677FFFF',
        label: {
          show: true,
        },
        emphasis: {
          focus: 'series',
        },
        data: [280, 300, 360, 450],
      },
      {
        name: '类型二',
        type: 'bar',
        stack: 'total',
        color: '#32BE78FF',
        label: {
          show: true,
        },
        emphasis: {
          focus: 'series',
        },
        data: [320, 480, 360, 400],
      },
      {
        name: '类型三',
        type: 'bar',
        stack: 'total',
        color: '#F8AC30FF',
        label: {
          show: true,
        },
        emphasis: {
          focus: 'series',
        },
        data: [290, 300, 520, 500],
      },
    ],
  };

  //percentageChartOption

  const rawData = [
    [100, 302, 301, 334, 390],
    [320, 132, 101, 134, 90],
    [220, 182, 191, 234, 290],
  ];
  const totalData: number[] = [];
  for (let i = 0; i < rawData[0].length; ++i) {
    let sum = 0;
    for (let j = 0; j < rawData.length; ++j) {
      sum += rawData[j][i];
    }
    totalData.push(sum);
  }

  const grid = {
    left: 100,
    right: 100,
    top: 50,
    bottom: 50,
  };

  const series: echarts.BarSeriesOption[] = ['类型一', '类型二', '类型三'].map(
    (name, sid, index) => {
      return {
        name,
        type: 'bar',
        stack: 'total',
        barWidth: '30%',
        label: {
          show: true,
          formatter: (params: any) => Math.round(params.value * 1000) / 10 + '%',
        },
        data: rawData[sid].map((d, did) => (totalData[did] <= 0 ? 0 : d / totalData[did])),
      };
    },
  );

  const percentageChartOption = {
    legend: {
      selectedMode: false,
    },
    grid,
    yAxis: {
      type: 'value',
      position: 'left',
      axisLabel: {
        formatter: (params: any) => params * 100 + '%',
      },
    },
    xAxis: {
      type: 'category',
      data: ['华中', '华东', '华南', '华北', '西南'],
    },
    series,
  };

  const mixOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'],
      // 改变x轴颜色
      axisLine: {
        lineStyle: {
          color: '#E4E4E4',
          width: 2, // 这里是为了突出显示加上的
        },
      },
    },
    // 设置两个y轴，左边显示一种类型，右边一种类型
    yAxis: [
      {
        splitLine: { show: false },
        type: 'value',
        position: 'left',
        // name: '数量',
        show: true,
        min: 15,
        max: 100,
        // 改变y轴颜色
        axisLine: {
          lineStyle: {
            color: '#E4E4E4',
            width: 2, // 这里是为了突出显示加上的
          },
        },
      },
      {
        splitLine: { show: false },
        type: 'value',
        position: 'right',
        name: '',
        // interval: 10,
        // min:0,
        // max:2,
        // 改变y轴颜色
        axisLine: {
          lineStyle: {
            color: '#E4E4E4',
            width: 2, //y轴宽度，这里是为了突出显示加上的
          },
        },
      },
    ],
    series: [
      {
        type: 'bar',
        data: [78.49, 76.01, 70.55, 70.03, 65.77, 53.2, 51.63, 34.26, 22.64, 17.76],
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'inside', //数据在中间显示
              formatter: '{c}', //百分比显示，模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数
            },
            color: '#32BE78', //设置柱子的颜色
          },
        },
      },
      {
        type: 'line',
        data: [1.056, 0.883, 0.352, 1.344, 1.069, 0.961, 0.735, 0.896, 0.694, 0.735],
        yAxisIndex: 1, // 这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来
        symbol: 'circle', // 折线点设置为实心点
        symbolSize: 10, // 折线点的大小
        itemStyle: {
          normal: {
            color: '#1677FF', //设置折线颜色
          },
        },
      },
    ],
  };

  const radarChartOption = {
    title: {
      text: 'Basic Radar Chart',
    },
    legend: {
      data: ['个人', '平均'],
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: '即时分析', max: 6500 },
        { name: '匠新创新', max: 16000 },
        { name: '匠新创新', max: 30000 },
        { name: '用户思维', max: 38000 },
        { name: '用户思维', max: 52000 },
      ],
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000],
            name: '个人',
          },
          {
            value: [5000, 14000, 28000, 26000, 42000],
            name: '平均',
          },
        ],
      },
    ],
  };

  const scatterChartOption = {
    xAxis: {},
    yAxis: {},
    legend: {
      data: ['类型1', '类型2'],
    },
    series: [
      {
        symbolSize: 20,
        data: [
          [10.0, 8.04],
          [8.07, 6.95],
          [13.0, 7.58],
          [9.05, 8.81],
          [11.0, 8.33],
          [14.0, 7.66],
          [13.4, 6.81],
          [10.0, 6.33],
          [14.0, 8.96],
          [12.5, 6.82],
          [9.15, 7.2],
          [11.5, 7.2],
          [3.03, 4.23],
          [12.2, 7.83],
          [2.02, 4.47],
          [1.05, 3.33],
          [4.05, 4.96],
          [6.03, 7.24],
          [12.0, 6.26],
          [12.0, 8.84],
          [7.08, 5.82],
          [5.02, 5.68],
        ],
        type: 'scatter',
        itemStyle: {
          color: '#1677FF',
        },
        name: '类型1',
      },
      {
        symbolSize: 20,
        data: [
          [1.0, 8.04],
          [2.07, 6.95],
          [3.0, 7.58],
          [9.05, 4.81],
          [15.0, 8.33],
          [16.0, 7.66],
          [13.4, 9.81],
          [10.0, 6.33],
          [11.0, 8.96],
          [3.5, 6.82],
          [2.15, 7.2],
          [3.5, 7.2],
          [0.03, 4.23],
          [1.2, 7.83],
          [12.02, 4.47],
          [11.05, 3.33],
          [4.05, 9.96],
          [3.03, 2.24],
          [2.0, 6.26],
          [2.0, 8.84],
          [3.08, 5.82],
          [5.02, 10.68],
        ],
        type: 'scatter',
        itemStyle: {
          color: '#32BE78',
        },
        name: '类型2',
      },
    ],
  };

  //category
  const categoryChartOption = {
    title: {
      text: '横分组条形图',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: 'category',
      data: ['上海', '北京', '杭州'],
    },
    series: [
      {
        name: '图例一',
        type: 'bar',
        data: [10000, 14000, 8000],
        itemStyle: {
          color: '#1677FF',
        },
      },
      {
        name: '图例二',
        type: 'bar',
        data: [11000, 9000, 16000],
        itemStyle: {
          color: '#32BE78',
        },
      },
      {
        name: '图例三',
        type: 'bar',
        data: [18000, 11000, 13000],
        itemStyle: {
          color: '#F8AC30',
        },
      },
    ],
  };

  //categoryChartOption2
  const categoryChartOption2 = {
    title: {
      text: '竖分组条形图',
    },
    legend: {},
    tooltip: {},
    dataset: {
      source: [
        ['product', '张三', '李四', '王五'],
        ['招商', 40, 91, 62],
        ['企划', 75, 55, 45],
        ['营运', 10, 25, 18],
        ['管理', 35, 70, 65],
      ],
    },
    xAxis: { type: 'category', data: ['招商', '企划', '营运', '管理'] },
    yAxis: {},
    series: [
      { type: 'bar', data: [40, 75, 10, 35], barWidth: '20%' },
      { type: 'bar', data: [91, 55, 25, 70], barWidth: '20%' },
      { type: 'bar', data: [62, 45, 18, 65], barWidth: '20%' },
    ],
  };

  const transverseChartOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      data: ['类型一', '类型二'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'value',
      },
    ],
    yAxis: [
      {
        type: 'category',
        axisTick: {
          show: false,
        },
        data: ['7-16', '7-17', '7-18', '7-19', '7-20', '7-21'],
      },
    ],
    series: [
      {
        name: '类型一',
        type: 'bar',
        label: {
          show: true,
          position: 'inside',
        },
        barWidth: '60%',
        itemStyle: {
          color: '#1677FF',
        },
        emphasis: {
          focus: 'series',
        },
        data: [200, 170, 240, 244, 200, 220],
      },
      {
        name: '类型二',
        type: 'bar',
        stack: 'Total',
        label: {
          show: true,
        },
        barWidth: '60%',
        itemStyle: {
          color: '#32BE78',
        },
        emphasis: {
          focus: 'series',
        },
        data: [-320, -302, -341, -374, -390, -450],
      },
    ],
  };

  //panVChartOption
  const panVChartOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      data: ['类型一', '类型二'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {
          show: false,
        },
        data: ['上海', '杭州', '北京'],
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: '类型一',
        type: 'bar',
        label: {
          show: true,
          position: 'inside',
        },
        itemStyle: {
          color: '#1677FF',
        },
        emphasis: {
          focus: 'series',
        },
        data: [120, -20, 80],
      },
      {
        name: '类型二',
        type: 'bar',
        stack: 'Total',
        label: {
          show: true,
        },
        itemStyle: {
          color: '#32BE78',
        },
        emphasis: {
          focus: 'series',
        },
        data: [140, -140, 70],
      },
    ],
  };

  //stackedChartOption
  const rawData2 = [
    [-100, -302, 301, -334, 390],
    [-320, -132, 101, -134, 90],
    [-220, -182, 191, -234, -290],
  ];

  const series2 = ['类型一', '类型二', '类型三'].map((name, sid) => {
    return {
      name,
      type: 'bar',
      stack: 'total',
      barWidth: '20%',
      label: {
        show: true,
        formatter: (params) => Math.round(params.value * 1000) / 10,
      },
      data: rawData2[sid].map((d, did) => (totalData[did] <= 0 ? 0 : d / totalData[did])),
    };
  });
  const stackedChartOption = {
    legend: {
      selectedMode: false,
    },
    grid: {
      left: 100,
      right: 100,
      top: 50,
      bottom: 50,
    },
    yAxis: {
      type: 'value',
      position: 'left',
      axisLabel: {
        formatter: (params: any) => params * 100,
      },
    },
    xAxis: {
      type: 'category',
      data: ['华中', '华东', '华南', '华北', '西南'],
    },
    series: series2,
  };

  // table
  const dataSource = reactive([
    {
      key: 1,
      num: 0,
      color: '#EB8A36',
      title: '消防监督检查',
      path: '/supervision/supervision/task-management',
      img: img1,
    },
    {
      key: 2,
      num: 0,
      color: '#1D77F5',
      title: '日常消防巡查任务',
      path: '/routine/routine/routineFirePatrol',
      img: img2,
    },
    {
      key: 3,
      num: 0,
      color: '#08BDA5',
      title: '行政许可任务',
      path: '/administrative/administrative/strative',
      img: img3,
    },
    {
      key: 4,
      num: 0,
      color: '#424CDB',
      title: '案件办理',
      path: '/administrative-penalty/administrative-penalty/case-management',
      img: img4,
    },
    {
      key: 5,
      num: 0,
      color: '#33BD24',
      title: '案件审批',
      path: '/administrative-penalty/administrative-penalty/case-approval',
      img: img5,
    },
    {
      key: 6,
      num: 0,
      color: '#FE8800',
      title: '行政许可审批',
      path: '/administrative/administrative/approve',
      img: img6,
    },
  ]);
  const columns: TableColumn[] = [
    {
      title: '承办单位',
      align: 'center',
      dataIndex: 'deptName',
    },
    {
      title: '罚款金额',
      align: 'center',
      dataIndex: 'money',
    },
  ];
  const loadData = async (
    params,
    onChangeParams: OnChangeCallbackParams,
  ): Promise<API.TableListResult> => {
    const data = await getTableListApi();
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };
  const initData = () => {
    getDeptMoney().then((res) => {
      spaceChartOption.value.xAxis.data = res.month;
      spaceChartOption.value.series[0].data = res.num;
    });
    getCaseType().then((res) => {
      // for (const key in res) {
      //   caseChartOption.value.series[0].data[Number(key) - 1].value = res[key];
      // }
    });
    getMissionNum().then((res) => {
      numIncreasing(
        res.jdTaskNum,
        res.rcTaskNum,
        res.xzTaskNum,
        res.caseNum,
        res.approveNum,
        res.taskApproveNum,
      );
    });
  };
  // 数字递增  item:元素  target:目标数

  const numIncreasing = (
    workTarget,
    provinceTarget,
    personTarget,
    processTarget,
    approveTarget,
    taskTarget,
  ) => {
    let timer = 500;
    var numWork = 0;
    var numProvince = 0;
    var numPerson = 0;
    var numProcess = 0;
    var numTarget = 0;
    var numTask = 0;

    var twork =
      workTarget &&
      setInterval(() => {
        numWork++;
        dataSource[0].num = numWork;
        if (dataSource[0].num == workTarget) {
          clearInterval(twork);
        }
      }, timer / workTarget);

    var tprovince =
      provinceTarget &&
      setInterval(() => {
        numProvince++;
        dataSource[1].num = numProvince;
        if (dataSource[1].num == provinceTarget) {
          clearInterval(tprovince);
        }
      }, timer / provinceTarget);

    var tperson =
      personTarget &&
      setInterval(() => {
        numPerson++;
        dataSource[2].num = numPerson;
        if (dataSource[2].num == personTarget) {
          clearInterval(tperson);
        }
      }, timer / personTarget);

    var tprocess =
      processTarget &&
      setInterval(() => {
        numProcess++;
        dataSource[3].num = numProcess;
        if (dataSource[3].num == processTarget) {
          clearInterval(tprocess);
        }
      }, timer / processTarget);

    var tprove =
      approveTarget &&
      setInterval(() => {
        numTarget++;
        dataSource[4].num = numTarget;
        if (dataSource[4].num == approveTarget) {
          clearInterval(tprove);
        }
      }, timer / approveTarget);

    var task =
      taskTarget &&
      setInterval(() => {
        numTask++;
        dataSource[5].num = taskTarget;
        if (dataSource[5].num == taskTarget) {
          clearInterval(task);
        }
      }, timer / taskTarget);
  };

  const handleToUrl = (item) => {
    router.push({
      path: item.path,
    });
  };
  defineOptions({
    name: 'DashboardWelcome',
  });
  onMounted(() => {
    initData();
  });
</script>

<style lang="less" scoped>
  @import '@/styles/theme.less';

  .box {
    width: 100%;
    height: calc(100vh - 280px);
    padding: 20px;

    .topBox {
      padding: 16px;
      border: 1px solid #f0f0f0;
      border-radius: 4px;

      .titleBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;

        .title {
          color: #444;
          font-size: 16px;
          font-weight: 700;
        }

        .text {
          display: flex;
          align-items: center;
          color: #999;

          /** 文本1 */
          font-size: 12px;
          font-weight: 400;

          img {
            margin-right: 6px;
          }
        }
      }

      .mainBox {
        display: flex;
        padding: 24px 0 24px 12px;
        cursor: pointer;

        .mainText {
          display: flex;
          flex-direction: column;
          margin-left: 12px;

          .num {
            margin-bottom: 4px;
            font-size: 25px;
            font-weight: 700;
          }

          .smallText {
            color: rgb(102 102 102 / 100%);
            font-size: 12px;
            font-weight: 400;
          }
        }
      }
    }

    .topRightBox {
      min-height: 268px;
      padding: 16px 10px;

      .titleBox {
        margin-bottom: 20px;

        .title {
          margin: 0 6px;
        }
      }
    }
  }
</style>
